<template>
  <div class="outer">
    <div class="box">
      <header class="header fix">
        <a href="javascript:;" class="backImg" @click="flightList"></a>
        <p class="titleCity"><span>{{flight.go}}</span>-<span>{{flight.back}}</span></p>
      </header>
      <div class="title fix">
        <div class="titleDate">{{flight.month}}月{{flight.day}}日 {{flight.Sunday}}</div>
        <div class="fix">
          <div class="title1 fix">
            <p class="titleGoDate">
              {{flight.currentList.fromTime}}
            </p>
            <p class="titleLineMiddle"></p>
            <p class="titleBackDate">
              {{flight.currentList.toTime}}
            </p>
          </div>
          <div class="title2 fix">
            <p class="titleGoCity">
              {{flight.currentList.fromInfo}}
            </p>
            <p class="flightDuration">
              {{flight.currentList.costTime}}
            </p>
            <p class="titleBackCity">
              {{flight.currentList.toInfo}}
            </p>
          </div>
          <div class="title3 fix">
            <p class="titleGoType">
              {{flight.currentList.carrierInfo}}
            </p>
            <p class="titleLineInfo">
              {{this.flightType}}
            </p>
            <p class="titleBackType" v-if="flight.currentList.mealType">
              <i class="iconfont icon-tangshi"></i>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <scroll  style="overflow: hidden;position: absolute;top: 0;left: 0;right: 0;bottom: 0">
        <ul>
          <li class="item fix" v-for="(arr, key, indexs) in flight.currentList.cabinMap">
             <div class="detail-title" v-if="arr.length > 0 && key === 'CUSTOMER_AGREEMENT'">大客户协议价</div>
             <div class="detail-title" v-if="arr.length > 0 && key === 'CARRIER_DIRECT'">航司直销</div>
             <div class="detail-title" v-if="arr.length > 0 && key === 'BUSINESS_OPTIMIZATION'">商务优选</div>
             <div v-for="(item, index) in arr" v-if="arr.length > 0" class="item-flex">
               <div class="l itemSub">
                 <div class="fix">
                   <!--<p class="cangwei" v-if="item.grade==='Y'">经济舱&nbsp;{{item.subCabinCode}}<span v-if="!item.subCabinCode">{{item.cabinCode}}</span>
                   </p>
                   <p class="cangwei" v-if="item.grade==='C'">公务舱&nbsp;{{item.subCabinCode}}<span v-if="!item.subCabinCode">{{item.cabinCode}}</span>
                   </p>
                   <p class="cangwei" v-if="item.grade==='F'">头等舱&nbsp;{{item.subCabinCode}}<span v-if="!item.subCabinCode">{{item.cabinCode}}</span>
                   </p>-->
                   <p class="discount1" v-show="item.isDirect">航司直营</p>
                   <p class="money"><span class="moneyIco">￥</span>{{item.salePrice}}</p>
                 </div>
                 <div>
                  <span class="cangwei" v-if="item.grade==='Y'">经济舱&nbsp;{{item.subCabinCode}}<span v-if="!item.subCabinCode">{{item.cabinCode}}</span>
                  </span>
                   <span class="cangwei" v-if="item.grade==='C'">公务舱&nbsp;{{item.subCabinCode}}<span v-if="!item.subCabinCode">{{item.cabinCode}}</span>
                  </span>
                   <span class="cangwei" v-if="item.grade==='F'">头等舱&nbsp;{{item.subCabinCode}}<span v-if="!item.subCabinCode">{{item.cabinCode}}</span>
                  </span>
                   <span class="discount-riles" v-if="item.discount">{{item.discount}}</span>
                   <span class="quit-ticket-rules"
                         v-if="quitTicketRule.length> 0"
                         v-show="quitTicketRule[index]['minPrice'] === -1"
                         @click="onShowPopupRule(item.cabinCode, item.salePrice, item, index)">退改签规定></span>
                   <span class="quit-ticket-rules"
                         v-if="quitTicketRule.length> 0"
                         v-show="quitTicketRule[index]['minPrice'] === 0"
                         @click="onShowPopupRule(item.cabinCode, item.salePrice, item, index)">{{quitTicketRule[index]['typeMsg']}}></span>
                   <span class="quit-ticket-rules"
                         v-if="quitTicketRule.length> 0"
                         v-show="quitTicketRule[index]['minPrice'] !== 0 && quitTicketRule[index]['minPrice'] !== -1"
                         @click="onShowPopupRule(item.cabinCode, item.salePrice, item, index)">退改￥{{quitTicketRule[index]['minPrice']}}起></span>
                   <span class="r money" v-if="parseInt(item.restSeatNum) < 10">剩{{item.restSeatNum}}张</span>
                 </div>
               </div>
               <div class="r r-money">
                 <div class="yuding" @click="yuding(item,index)" v-if="item.withinTwoHoursLowestPrice">
                   <div class="yudingText">预订</div>
                   <div class="lowPrice">低价</div>
                 </div>
                 <div class="yuding" @click="yuding(item,index)" v-else>
                   <div>预订</div>
                 </div>
               </div>
             </div>
          </li>
        </ul>
      </scroll>
    </div>
    <!--退票规则弹框-->
    <div v-transfer-dom>
      <Popup v-model="popupQuitRulesVisible" position="bottom" height="100%" style="background-color: #fff;overflow: hidden">
        <flight-quit-rule @bookingTicket="bookingTicket"
                          @closePopupContent="closePopupContent"
                          :isShowBtn = true
                          :navList="navList"
                          :beforeRefundTime="beforeRefundTime"
                          :beforeRefundMoney="beforeRefundMoney"
                          :beforechangeMoney="beforechangeMoney"
                          :typeNum="typeNum"
                          :isTurnTicket="isTurnTicket"
                          :baggage="baggage"
                          :itemTimeOne="itemTimeOne"
                          :itemTimeTwo="itemTimeTwo"
                          :itemTimeThree="itemTimeThree"
                          :salePrice="salePrice"></flight-quit-rule>
        <!--前后以一小时最低价-->
        <alert2 v-if="showLowPrice && flight.withinTwoHoursLowestPriceList.length > 0" @alert="showLowPrice = false">
          <div class="alertLowPrice">
            <p>您选择的时间段内有更低的航班:</p>
            <ul>
              <li v-for="(item ,index) in flight.withinTwoHoursLowestPriceList" class="lowPriceItem"
                  @click="checkPriceAjaxLow(item)">
                <div class="alert-box">
                  <p class="lowSub"><span>起</span><span>{{item.departureTime}}</span><span>{{item.fromAirportName}}</span>
                  </p>
                  <p class="lowSub"><span>降</span><span>{{item.arrivalTime}}</span><span>{{item.toAirportName}}</span></p>
                  <p class="lowSub"><span>{{item.carrierName}}</span><span>{{item.aircraft.code}}</span><span
                    v-if="item.aircraft.type == 1">小机型</span><span v-if="item.aircraft.type == 2">中机型</span><span
                    v-if="item.aircraft.type == 3">大机型</span></p>
                </div>
                <div class="lowMoney">
                  ¥{{item.salePrice}}
                </div>
              </li>
            </ul>
            <p @click="checkPriceAjaxLow(flight.currentCabin)">继续选择原航班</p>
          </div>
        </alert2>
      </Popup>
    </div>
    <!--价格变动弹框 -->
    <alert1 v-show="alertShowPriceChange" class="ll" :confirmInfo="message" @confirmBtnL="cancelA"
            @confirmBtnR="successA">
    </alert1>
    <confirmOne :confirmOneInfo="confirmOneInfo" @confirmOneBtn="confirmOneBtn" v-show="confirmOneShow"></confirmOne>
    <confirmOne :confirmOneInfo="message" @confirmOneBtn="cancelA" v-show="alertShowTicketsChange"></confirmOne>
    <!--前后以一小时最低价-->
    <alert2 v-if="showLowPrice && flight.withinTwoHoursLowestPriceList.length > 0" @alert="showLowPrice = false">
      <div class="alertLowPrice">
        <p>您选择的时间段内有更低的航班:</p>
        <ul>
          <li v-for="(item ,index) in flight.withinTwoHoursLowestPriceList" class="lowPriceItem"
              @click="checkPriceAjaxLow(item)">
            <div class="alert-box">
              <p class="lowSub"><span>起</span><span>{{item.departureTime}}</span><span>{{item.fromAirportName}}</span>
              </p>
              <p class="lowSub"><span>降</span><span>{{item.arrivalTime}}</span><span>{{item.toAirportName}}</span></p>
              <p class="lowSub"><span>{{item.carrierName}}</span><span>{{item.aircraft.code}}</span><span
                v-if="item.aircraft.type == 1">小机型</span><span v-if="item.aircraft.type == 2">中机型</span><span
                v-if="item.aircraft.type == 3">大机型</span></p>
            </div>
            <div class="lowMoney">
              ¥{{item.salePrice}}
            </div>
          </li>
        </ul>
        <p @click="checkPriceAjaxLow(flight.currentCabin)">继续选择原航班</p>
      </div>
    </alert2>
  </div>
</template>

<script>
  import alert1 from "components/confirm.vue"
  import alert2 from "components/alert.vue"
  import confirmOne from "components/confirmOne.vue"
  import { Toast} from "mint-ui"
  import Scroll from "../../../common/scroll/scroll.vue"
  import { Popup, TransferDomDirective as TransferDom} from 'vux'
  import flightQuitRule from '../../../components/flight/flight-quit-rule.vue'

  export default{
    data(){
      return {
        listTitle: {},  // 每个航班详情的title
        item: {},
        indexs: 0,
        flightPriceNum: 0,
        itemTimeOne: '',
        itemTimeTwo: '',
        itemTimeThree: '',
        baggage: 20,
        isTurnTicket: '',
        typeNum: 1,
        beforeRefundTime: [],
        beforeRefundMoney: [],
        beforechangeMoney: [],
        popupQuitRulesVisible: false,
        showLowPrice: false,
        alertShowPriceChange: false,
        alertShowTicketsChange: false,
        flightPriceDto: '',
        message: "价格变动",
        message2: '余票不足',
        dateTitle: '10月10日周一',
        titleGoDate: "06:40",
        titleGoCity: '首都机场T2',
        titleGoType: '东方航空HU7604',
        titleBackDate: "06:40",
        titleBackCity: '首都机场T2',
        titleLineInfo: '中型机',
        titleBackType: '经济舱',
        items: [
          {
            cangwei: '经济舱',
            discount: '全价',
            money: '¥1240'
          },
        ],
        navList: ['退改详情', '行李说明'],
        lowPriceRule: [], // 请求接口拿到数组
        quitTicketRule: [], //数据筛选后拿到的对于数据
        confirmOneInfo: '',
        confirmOneShow: false,
        checkPrice: '',//验价后的价格
        isDirect: false,
      }
    },
    components: {alert1: alert1, confirmOne, alert2: alert2,Scroll,Popup, flightQuitRule},
    directives: {
      TransferDom
    },
    methods: {
      closePopupContent() {
        this.popupQuitRulesVisible = false;
      },
      //调用接口拿到舱位退改详情信息
      onShowPopupRule(itemCabinCode, salePrice, item, index) {
        let that = this;
        this.salePrice = salePrice;
        that.item = item;
        that.indexs = index;
        let rulePriceDetailObj = {
          cabinCode: itemCabinCode,
          carrierCode: that.$route.query.carrierCode,
          fromAirport: that.$route.query.fromAirport,
          toAirport: that.$route.query.toAirport
        };
        that.$flight.flightRefundChangeDetail(rulePriceDetailObj, function (res) {
          that.popupQuitRulesVisible = true;
          that.typeNum = res.type;
          if(that.typeNum == 1) {
            that.beforechangeMoney = res.changeAmountList;
            that.beforeRefundTime = res.headers;
            that.beforeRefundMoney = res.refundAmountList;
            that.isTurnTicket = res.endorseRule;
          } else if(that.typeNum == 2) {
            that.beforechangeMoney = res.changeAmountList.concat().splice(0, 1);
            that.beforeRefundTime = res.headers.concat().splice(0, 1);
            that.beforeRefundMoney = res.refundAmountList.concat().splice(0, 1);
            that.isTurnTicket = res.endorseRule;
          } else if(that.typeNum == 3) {
            that.itemTimeOne = res.headers[0];
            that.itemTimeTwo = res.headers[1];
            that.itemTimeThree = res.headers[2];
          }
          that.baggage  = parseInt(res.baggage.replace(/[^0-9]/ig,"") );
        }, function (err) {
          $flightTools.errorToIndex(that);
        })
      },
      // 筛选后端返回的对于字母数组数据
      _getPriceRules() {
        var that = this;
        let priceRuleObj = that.$store.state.flight.currentList.cabinShowList;
        let getLowPriceRule = that.lowPriceRule;
        priceRuleObj.forEach((arr, index) => {
          getLowPriceRule.forEach((newArr, newIndex) => {
            if(arr.cabinCode === newArr.cabinCode) {
              that.quitTicketRule.push(getLowPriceRule[newIndex])
            }
          })
          return;
        })
      },
      confirmOneBtn(){
        this.confirmOneShow = false;
      },
      flightList(){
        this.$router.go(-1);
      },
      cancelA(){
        this.alertShowTicketsChange = false;
        this.$router.go(-1);
      },
      // 价格变动弹窗  取消按钮
      successA(){
        var currentCabin = this.$store.state.flight.currentCabin;
        currentCabin.facePrice = currentCabin.salePrice = this.checkPrice;
        this.alertShowPriceChange = false;
        this.bookingIndex();
      },
      // 价格变动弹窗  确认按钮
      checkPriceAjaxLow(cabinShowList){
        var that = this;
        this.showLowPrice = false;
        this.$store.state.flight.currentCabin = cabinShowList;
        var flight = this.$store.state.flight;
        that.$vux.loading.show({
          text: '加载中...'
        })
        var searchDto = {
          fromDate: cabinShowList.departureDate,
          flightNo: cabinShowList.flightNo,
          cabinCode: cabinShowList.cabinCode,
          fromCityCode: cabinShowList.fromCity,
          toCityCode: cabinShowList.toCity,
          withinTwoHoursLowestPrice: cabinShowList.withinTwoHoursLowestPrice == undefined || cabinShowList.withinTwoHoursLowestPrice == true && true,
          routeRuleItemId:cabinShowList.routeRuleItemId,
          agreementPolicyId: cabinShowList.agreementPolicyId,
          productType: cabinShowList.productType,
          originalPrice: cabinShowList.originalPrice
        };

        this.$store.state.flight.searchDto = searchDto; //用于创单使用

        that.$flight.checkPrice({

          routeRuleItemId: cabinShowList.routeRuleItemId,
          agreementPolicyId: cabinShowList.agreementPolicyId,

          productType: cabinShowList.productType,
          carrierCode: cabinShowList.carrierCode,
          flightNo: cabinShowList.flightNo,

          departureDate: cabinShowList.departureDate,
          departureTime: cabinShowList.departureTime,

          arrivalDate: cabinShowList.arrivalDate,//到达时间 yyyy-MM-dd
          arrivalTime: cabinShowList.arrivalTime,//到达时间 HH:mm

          fromAirport: cabinShowList.fromAirport,
          toAirport: cabinShowList.toAirport,

          fromCity: cabinShowList.fromCity,
          toCity: cabinShowList.toCity,

          cabinCode: cabinShowList.cabinCode,

          subCabinCode: cabinShowList.subCabinCode,
          cabinClass: cabinShowList.cabinClass,
          originalPrice: cabinShowList.originalPrice
        },function (data) {
          that.$vux.loading.hide();
          that.popupQuitRulesVisible = false;
          switch (data.code) {
            case '-1'://一切正常
              var d = data.data;
              searchDto.checkPriceRouteRuleItemId = d.routeRuleItemId;
              that.$store.state.flight.salePrice = d.salePrice;
              /*赋值变化后的价格*/
              that.$store.state.flight.endorseRefundRules = d.endorseAndRefundRule && d.endorseAndRefundRule.length>0?d.endorseAndRefundRule[0]:{};
              that.$store.state.flight.departureTax = d.departureTax;
              that.$store.state.flight.fuelTax = d.fuelTax;
              that.$store.state.flight.extraFee = d.extraFee;
              that.bookingIndex();
              break;
            case '3'://价格变化
              that.alertShowPriceChange = true;
              that.message = data.message;
              that.checkPrice = data.data.facePrice;
              break;
            case '4':
              that.$vux.alert.show({
                title: '温馨提示',
                content: data.message
              });
              break;
            case'105':
              that.$vux.alert.show({
                title: '温馨提示',
                content: data.message
              });
              break;
          }
        },function () {
          that.$vux.loading.hide();
          that.$vux.toast.show('验价失败');
        });
      },
      bookingTicket() {
        let that = this;
        this.$store.state.flight.cabinIndex = that.indexs;
        this.$store.state.flight.currentCabin = that.item;
        if (that.item.withinTwoHoursLowestPrice) {//如果当前为最低航班,直接验价
          that.checkPriceAjaxLow(that.item);
        } else {//否则,弹出低价框
          that.$store.state.flight.withinTwoHoursLowestPriceList = that.item.withinTwoHoursLowestPriceList;
          that.showLowPrice = true;
        }
      },
      yuding(item, index){
        this.$store.state.flight.cabinIndex = index;
        this.$store.state.flight.currentCabin = item;
        if (item.withinTwoHoursLowestPrice) {//如果当前为最低航班,直接验价
          this.checkPriceAjaxLow(item, index);
        } else {//否则,弹出低价框
          this.$store.state.flight.withinTwoHoursLowestPriceList = item.withinTwoHoursLowestPriceList;
          this.showLowPrice = true;
        }
      },
      //把证件信息id转换成对应的文字
      cardName(type) {
        var cardIdName = null;
        $.each(this.$store.state.credentialInfo, function (index, item) {
          if (item.itemCode == type) {
            cardIdName = item.itemTxt;
            return false;
          }
        });
        return cardIdName;
      },
      bookingIndex(){
        //  清除上次预定保留的 违规数据
        this.$store.state.illegalReasonList = [];
        this.$store.state.illegalPass = false;
        var flight = this.$store.state.flight;
        var searchDto = this.$store.state.flight.searchDto;
        var that = this;
        that.$vux.loading.show({
          text: '加载中...'
        })
        that.$flight.flightBookingTicket({
          fromDate: searchDto.fromDate,
          flightNo: searchDto.flightNo,
          cabinCode: searchDto.cabinCode,
          fromCityCode: searchDto.fromCityCode,
          toCityCode: searchDto.toCityCode,
          routeRuleItemId: searchDto.routeRuleItemId,

          agreementPolicyId: searchDto.agreementPolicyId,
          productType: searchDto.productType,

          checkPriceRouteRuleItemId:searchDto.checkPriceRouteRuleItemId
        }, (res) => {
          that.$vux.loading.hide();
          switch (res.code) {
            case "7":
              that.confirmOneInfo = res.message;
              that.confirmOneShow = true;
              return;
          }

          that.$store.state.flight.bookingInit = res;
          that.$store.state.flight.fuelTax = res.detailDto.flightPrice.fuelTax;
          that.$store.state.flight.departureTax = res.detailDto.flightPrice.departureTax;
          that.$store.state.flight.extraFee = res.detailDto.flightPrice.extraFee;
          that.$store.state.flight.facePrice = res.detailDto.flightPrice.facePrice;
          that.$store.state.flight.salePrice = res.detailDto.flightPrice.salePrice;
          that.$store.state.flight.serverCharge = res.serverCharge;
          that.$store.state.insurancedata.flight.Insurance = res.hasInsurance;
          var recentPassenger = [];
          that.$store.commit('setCredentialInfo', res.credentialTypes)
          /*设置成火车票的证件类型*/
          that.$store.state.contact = res.contacts;
          that.$store.state.expenseTravelType.expenseTree = res.expenseTravel;
          that.$store.state.expenseTravelType.travelTypes = res.travelTypes;
          var userInfo = that.$store.state.userInfo;
          var flagCheck = false;
          for (let recentItem of res.recentPassengerList) {
            let ob = {};
            ob.checked = recentItem.userId == userInfo.userId || recentItem.appIsChecked;
            ob.birthday = recentItem.birthday;
            ob.credentialNo = recentItem.credentialNo;
            ob.credentialType = recentItem.credentialType;
            ob.credentialName = recentItem.credentialTypeValue;
            ob.email = recentItem.email;
            ob.sexType = recentItem.gender;
            ob.sex = recentItem.genderValue;
            ob.isPassEmpLevel = recentItem.isPassEmpLevel;
            ob.mobile = recentItem.mobile;
            ob.name = recentItem.name;
            ob.passengerType = recentItem.passengerType;
            ob.passengerTypeValue = recentItem.passengerTypeValue;
            ob.travellerType = recentItem.travellerType;
            ob.userId = recentItem.userId;
            ob.empLevelCode = recentItem.empLevelCode;//职级code  没传的话,创单就会需要补充


            ob.costUnitCode = '';
            ob.orgId = '';
            ob.corporationId = '';
            ob.amount = '';
            ob.travelCode = '';
            recentPassenger.unshift(ob);
            if(ob.checked){
              flagCheck = true;
            }
          }
          var list = {
            'list': recentPassenger,
            'type': 'pre'
          };
          if(flagCheck == false && userInfo && userInfo.userId){
            if(userInfo.cardType && userInfo.cardType.length >  0) {
              recentPassenger.unshift({
                checked:true,
                userId: userInfo.userId,
                costUnitCode: '',
                orgId: '',
                corporationId: '',
                amount: '',
                mobile: userInfo.mobile,
                email: userInfo.email,
                travelCode: '',
                empLevelCode: userInfo.rank,
                isPassEmpLevel: 1 == userInfo.status,
                name: userInfo.name,
                sex:  userInfo.sex == 0 ? '男' : '女',
                sexType: userInfo.sex == 0 ? 'M' : 'F',
                credentialName: that.cardName(userInfo.cardType[0].idType),
                credentialType: userInfo.cardType[0].idType,
                passengerType: 'ADU',
                credentialNo: userInfo.cardType[0].idNumber,
                travellerType: 3,  //默认员工
                birthday: userInfo.birthday,
              });
            }
          }
          that.$store.commit('setRecentPassengerList', list);
          that.$store.state.jobTitleRanks = res.empLevelList;//接受后台给的职级选项
          that.$store.state.reasonData = res.illegalList;
          that.$router.push({
            name: 'booking'
          });
        }, (err) => {
          that.$vux.loading.hide();
          $flightTools.errorToIndex(that);
        })
      }

    },
    created() {
      let that = this;
      let lowPriceObj = {
        carrierCode: this.$route.query.carrierCode,
        fromAirport: this.$route.query.fromAirport,
        toAirport: this.$route.query.toAirport
      }
      that.$flight.flighOptimalRule(lowPriceObj, function (res) {
        that.lowPriceRule = res
        that._getPriceRules();
      }, function (err) {
        that.$router.push({
          path: 'error'
        })
      })
    },
    mounted() {
      let that = this;
      that.$vux.loading.hide();
      that.$store.state.flight.cabinIndex = 0;
      that.listTitle = this.flight.productGroupMap;
    },
    computed: {
      index(){
        return this.$store.state.flight.index
      },
      flight(){
        return this.$store.state.flight
      },
      flightType(){ //      机型转换
        var flightType = '';
        if (this.flight.currentList.aircraftDto) {
          if (this.flight.currentList.aircraftDto.type) {
            var type = this.flight.currentList.aircraftDto.type;
            if (type == 3) {
              flightType = '大型机';
            } else if (type == 2) {
              flightType = '中型机';
            } else if (type == 1) {
              flightType = '小型机'
            }
          }
        }
        return flightType
      },
    }
  }
</script>
<style rel="stylesheet/scss" scoped>
  .main ul>li{
    margin-bottom: .25rem;
  }
  .detail-title {
    padding: .5rem;
    font-size: .65rem;
    color: #666;
    border-bottom: 1px solid #eee;
  }
  .item {
    background-color: #fff;
  }
  .item>.item-flex {
    display: flex;
    padding: .65rem .5rem;
    line-height: .85rem;
    border-bottom: 1px solid #eee;
  }
  .itemSub {
    flex: 0 0 70%;
    color: #999;
  }
  .item p {
    float: left;
    line-height: 1.3rem;
  }
  .item .r-money {
    flex: 0 0 30%;
    text-align: right;
  }
  .cangwei {
    width: 40%;
    color: #999;
    font-size: .6rem;
  }
  p.discount1 {
    width: 30%;
    height: 1rem;
    font-size: .55rem !important;
    background-color: #46a1bb;
    margin-top: .15rem;
    text-align: center;
    color: #fff;
    padding: 0 .125rem 0 .125rem;
    border-radius: .125rem;
    opacity: 0.5;
    line-height: 1rem;
    box-sizing: border-box;
  }
  .alert-box {
    font-size: .85em;
  }
  p.money {
    width: 30%;
    color: #f60;
    text-align: left;
    height: 1.3rem;
    font-size: .9rem;
    line-height: 1.3rem;
    float: left;
  }
  .money {
    color: #f60!important;
  }
  .moneyIco {
    font-size: .65rem;
  }
  .item .yuding {
    float: right;
    width: 2.2rem;
    text-align: center;
    color: #fff;
    height: 2.25rem;
    line-height: 2.25rem;
    font-size: .75rem;
    background-color: #46a1bb;
    border-radius: .2rem;
    box-sizing: border-box;
  }
  .item .yudingText {
    line-height: 1.25rem;
    font-size: .75rem;
    width: 2.2rem;
    border-radius: .2rem .2rem 0 0;
    border: 1px solid #46a1bb;
    background-color: #46a1bb;
  }
  .item .lowPrice {
    width: 2.2rem;
    line-height: 1rem;
    text-align: center;
    background-color: #fff;
    color: #46a1bb;
    border: 1px solid #46a1bb;
    border-radius: 0 0 .2rem .2rem;
    font-size: .55rem;
  }
  .discount-riles {
    margin-right: .5rem;
  }
  .quit-ticket-rules {
    padding: .2rem .5rem .2rem 0;
  }


</style>
<style scoped>
  .outer {
    width: 100%;
    position: relative;
    background-color: #e6e6e6;
    font-size: .6rem;
    height: 100%;
    overflow: hidden;
  }

  .box {
    top: 0;
    left: 0;
    right: 0;
  }

  .header {
    background: #46a1bb;
    height: 2.2rem;
    background-size: cover;
    color: #fff;
    padding: 0 .75rem;
  }

  .backImg {
    float: left;
    width: 1.7rem;
    height: 2.2rem;
    line-height: 2.2rem;
    text-align: left;
    background: url('../../../assets/images/back.png') no-repeat left center;
    background-size: .6rem 1.1rem;
  }

  .main {
    position: relative;
    height: calc(100% - 8.7rem);
    background-color: #fff;
  }

  .titleCity {
    float: left;
    height: 2.2rem;
    /*margin-top: 50px;*/
    width: 73.33%;
    text-align: center;
    line-height: 2.2rem;
    font-size: .9rem;
  }

  .title {
    text-align: center;
    background-color: #fff;
    width: 100%;
    height: 6.5rem;
    margin: 0 .25rem .25rem 0;
  }

  .titleDate {
    font-size: .75rem;
    text-align: left;
    padding: .65rem .5rem;
  }

  .title1 {
    line-height: 1.5rem;
    font-size: 1.15rem;
  }

  .title1 p {
    float: left;
  }

  .title2 {
    line-height: 1.25rem;
  }

  .title3 {
    line-height: 1.25rem;
  }

  .titleGoDate {
    width: 30%;
  }

  .titleBackDate {
    width: 30%;
  }

  .titleLineMiddle {
    width: 40%;
    height: 1.5rem;
    background: url("../../../assets/images/goBackLine.png") no-repeat center;
    background-size: 5.65rem .25rem;
  }

  .titleGoCity {
    width: 30%;
    float: left;
  }

  .flightDuration {
    float: left;
    width: 40%;
    text-align: center;
  }

  .titleBackCity {
    width: 30%;
    float: right;
    text-align: center;
  }

  .titleGoType {
    width: 30%;
    float: left;
    text-align: center;
  }

  .titleLineInfo {
    float: left;
    width: 40%;
    text-align: center;
  }

  .titleBackType {
    width: 7rem;
    float: right;
    margin-right: .25rem;
  }
</style>

<style rel="stylesheet/scss" lang="scss">
  .toastYuError {
    width: 12rem;
    text-align: center;
    .mint-toast-text {
      font-size: .7rem !important;
    }
  }

  .mint-indicator-mask {
    z-index: 999999998;
  }

  .mint-indicator-wrapper {
    z-index: 999999999;
  }
</style>

<!--前后一小时最低价弹窗-->
<style scoped>
  .alertLowPrice {
    width: 15rem;
    box-sizing: border-box;
  }

  .alertLowPrice > ul {
    max-height: 15rem;
    overflow: auto;
  }

  .alertLowPrice > p:first-of-type {
    background-color: #46a1bb;
    color: #fff;
    font-size: .8rem;
    padding: .5rem 0;
  }

  .alertLowPrice > p:last-of-type {
    background-color: #46a1bb;
    color: #fff;
    font-size: .85rem;
    padding: .5rem 0;
  }

  .lowPriceItem {
    display: flex;
    justify-content: space-between;
    padding: .45rem 1.2rem .45rem 1.75rem;
    font-size: .75rem;
    line-height: 1rem;
    border-bottom: 1px solid #ddd;
  }

  .lowPriceItem:last-of-type {
    border: none;
  }

  .lowSub {
    text-align: left;
  }

  .lowSub > span {
    margin-right: .375rem;
  }

  .lowMoney {
    line-height: 3rem;
    font-size: 1.25rem;
    color: #f60;
  }
</style>
